import {
  View,
  Text,
  StyleSheet,
  Image,
  StatusBar,
  Pressable,
  ScrollView,
} from 'react-native'
import { Shadow } from 'react-native-shadow-2'
import { common, flexCol } from '../assets/style/common'
import useGetStatusBar from '../utils/useGetStatusBar'
import { LinearGradient } from 'expo-linear-gradient'
import { observer } from 'mobx-react-lite'
import { useStore } from '../store'
import OwlButton from '../component/common/owlButton'
import { StackProps } from '@/routes/type'
export default observer(function Mine({ navigation }: StackProps<'Home'>) {
  const [barHeight] = useGetStatusBar()
  const { userStore } = useStore()
  function goPersonal() {
    if (!userStore.getId) {
      return navigation.navigate('Login')
    }
  }
  function logout() {
    userStore.logout()
    navigation.navigate('Login')
  }
  function onPress() {
    navigation.navigate('MyWebView', { url: '' })
  }
  return (
    <LinearGradient
      start={{ x: 0.5, y: 0.3 }}
      end={{ x: 0.5, y: 1 }}
      colors={['#f3fbff', '#f1f1f1']}
    >
      <StatusBar
        translucent
        backgroundColor="rgba(0,0,0,0)"
        barStyle={'dark-content'}
      />
      <ScrollView style={style.cnt}>
        <Pressable
          onPress={goPersonal}
          style={StyleSheet.compose(
            StyleSheet.compose(style.headerWrap, common.flexCol),
            {
              paddingTop: barHeight + 12,
            },
          )}
        >
          <Shadow startColor="#00000008" distance={4} offset={[0, 4]}>
            <Image
              style={style.header}
              source={require('../assets/images/avatar.jpg')}
            />
          </Shadow>
          {userStore.getId ? (
            <View>
              <Text style={style.hName}>{userStore.userInfo.name}</Text>
              <Text style={style.hAccount}>
                账号名：{userStore.userInfo.account}
              </Text>
              <View style={StyleSheet.compose(style.hbtm, common.flexCol)}>
                <Text>关注 {userStore.userInfo.focusNum}</Text>
                <Text style={style.hSeparate} />
                <Text>好友 {userStore.userInfo.friendsNum}</Text>
              </View>
            </View>
          ) : (
            <View>
              <Text style={style.hName}>登录</Text>
              <Text style={style.hAccount}>
                您还未登录，新用户立领50元优惠券
              </Text>
            </View>
          )}
          <Pressable
            style={StyleSheet.compose(common.flexCol, style.hIconWrap)}
          >
            <Text style={style.hIcon}>&#x10191;</Text>
            <Text style={style.hSet}>设置</Text>
          </Pressable>
        </Pressable>
        <View style={style.vipCntWrap}>
          <Shadow startColor="#00000006" distance={4} offset={[0, -2]}>
            <LinearGradient
              start={{ x: 0, y: 0.5 }}
              end={{ x: 1, y: 0.5 }}
              style={StyleSheet.compose(common.flexCol, style.vipCnt)}
              colors={['#ffbf30', '#fbce6a']}
            >
              <Text style={style.vipTit}>会员中心</Text>
              <Text style={style.vipSeparate} />
              <Text style={style.vipLoop}>1888积分薯片组合</Text>
              <View style={style.vipBtn}>
                <Text style={style.vipBtnTxt}>去兑换</Text>
              </View>
            </LinearGradient>
          </Shadow>
        </View>
        <View style={style.mainBgm}>
          <View style={StyleSheet.compose(style.topMenu, common.flexCol)}>
            <View style={style.topMenuItem}>
              <Image
                style={style.topMenuIcon}
                source={require('../assets/icon/persontop1.png')}
              />
              <Text style={style.topMenuTxt}>收藏</Text>
            </View>
            <View style={style.topMenuItem}>
              <Image
                style={style.topMenuIcon}
                source={require('../assets/icon/persontop2.png')}
              />
              <Text style={style.topMenuTxt}>足迹</Text>
            </View>
            <View style={style.topMenuItem}>
              <Image
                style={style.topMenuIcon}
                source={require('../assets/icon/persontop3.png')}
              />
              <Text style={style.topMenuTxt}>优惠券</Text>
            </View>
            <View style={style.topMenuItem}>
              <Image
                style={style.topMenuIcon}
                source={require('../assets/icon/persontop4.png')}
              />
              <Text style={style.topMenuTxt} lineBreakMode="middle">
                零钱￥0.0
              </Text>
            </View>
          </View>
          <Shadow
            startColor="#00000004"
            distance={4}
            offset={[0, 0]}
            style={{ width: '100%' }}
          >
            <View style={style.cardWrap}>
              <Text style={style.cardTit}>我的订单</Text>
              <View style={StyleSheet.compose(style.cardCnt, common.flexCol)}>
                <View style={style.topMenuItem}>
                  <Image
                    style={style.topMenuIcon}
                    source={require('../assets/icon/dingdan1.png')}
                  />
                  <Text style={style.topMenuTxt}>待付款</Text>
                </View>
                <View style={style.topMenuItem}>
                  <Image
                    style={style.topMenuIcon}
                    source={require('../assets/icon/dingdan2.png')}
                  />
                  <Text style={style.topMenuTxt}>待发货</Text>
                </View>
                <View style={style.topMenuItem}>
                  <Image
                    style={style.topMenuIcon}
                    source={require('../assets/icon/dingdan3.png')}
                  />
                  <Text style={style.topMenuTxt}>待收货</Text>
                </View>
                <View style={style.topMenuItem}>
                  <Image
                    style={style.topMenuIcon}
                    source={require('../assets/icon/dingdan4.png')}
                  />
                  <Text style={style.topMenuTxt}>待评价</Text>
                </View>
                <View style={style.topMenuItem}>
                  <Image
                    style={style.topMenuIcon}
                    source={require('../assets/icon/dingdan5.png')}
                  />
                  <Text style={style.topMenuTxt}>退款/售后</Text>
                </View>
              </View>
            </View>
          </Shadow>
          <Shadow
            startColor="#00000004"
            distance={4}
            offset={[0, 0]}
            style={{ width: '100%', marginTop: 12 }}
          >
            <Pressable style={style.cardWrap} onPress={onPress}>
              <View style={flexCol(style.colMenu)}>
                <Image
                  style={style.colIcon}
                  source={require('../assets/icon/soccer.png')}
                />
                <Text style={style.colTit}>活动1</Text>
                <Text style={style.cardArrow}>&#xe643;</Text>
              </View>
              <View style={style.colSperateLine} />
              <View style={flexCol(style.colMenu)}>
                <Image
                  style={style.colIcon}
                  source={require('../assets/icon/soccer.png')}
                />
                <Text style={style.colTit}>活动2</Text>
                <Text style={style.cardArrow}>&#xe643;</Text>
              </View>
              <View style={style.colSperateLine} />
              <View style={flexCol(style.colMenu)}>
                <Image
                  style={style.colIcon}
                  source={require('../assets/icon/soccer.png')}
                />
                <Text style={style.colTit}>活动3</Text>
                <Text style={style.cardArrow}>&#xe643;</Text>
              </View>
              <View style={style.colSperateLine} />
              <View style={flexCol(style.gridWrap)}>
                <View style={flexCol(style.gridMenu)}>
                  <Image
                    style={style.colIcon}
                    source={require('../assets/icon/soccer.png')}
                  />
                  <Text style={style.colTit}>专区1</Text>
                  <Text style={style.cardArrow}>&#xe643;</Text>
                </View>
                <View style={style.gridSperateLine} />
                <View style={flexCol(style.gridMenu)}>
                  <Image
                    style={style.colIcon}
                    source={require('../assets/icon/soccer.png')}
                  />
                  <Text style={style.colTit}>专区2</Text>
                  <Text style={style.cardArrow}>&#xe643;</Text>
                </View>
              </View>
              <View style={style.colSperateLine} />
              <View style={flexCol(style.gridWrap)}>
                <View style={flexCol(style.gridMenu)}>
                  <Image
                    style={style.colIcon}
                    source={require('../assets/icon/soccer.png')}
                  />
                  <Text style={style.colTit}>专区3</Text>
                  <Text style={style.cardArrow}>&#xe643;</Text>
                </View>
                <View style={style.gridSperateLine} />
                <View style={flexCol(style.gridMenu)}>
                  <Image
                    style={style.colIcon}
                    source={require('../assets/icon/soccer.png')}
                  />
                  <Text style={style.colTit}>专区4</Text>
                  <Text style={style.cardArrow}>&#xe643;</Text>
                </View>
              </View>
            </Pressable>
          </Shadow>
        </View>
        <Pressable
          onPress={logout}
          style={{ marginHorizontal: 6, marginBottom: 12 }}
        >
          <OwlButton
            linearGradientColors={['#fff', '#fff']}
            isShadow={false}
            text="登出"
          />
        </Pressable>
      </ScrollView>
    </LinearGradient>
  )
})
// function ScrollWrap() {
//   const scrollInnerWidth = 80 * 7
//   const blockWrapWidth = 20
//   const scrollX = useRef(new Animated.Value(0)).current
//   const [left, setLeft] = useState(0)
//   const [blockLeft, setBlockLeft] = useState(0)
//   const [blockWidth, setBlock] = useState(6)
//   const moveX = useMemo(
//     () =>
//       scrollX.interpolate({
//         inputRange: [0, left],
//         outputRange: [0, blockLeft],
//       }),
//     [left, blockLeft],
//   )
//   function onLayout(e: LayoutChangeEvent) {
//     const width = e.nativeEvent.layout.width
//     const left = scrollInnerWidth > width ? scrollInnerWidth - width : 0
//     setBlock(width / (scrollInnerWidth / blockWrapWidth))
//     setLeft(left)
//     setBlockLeft(left / (scrollInnerWidth / blockWrapWidth))
//   }
//   return (
//     <Shadow
//       startColor="#00000004"
//       distance={4}
//       offset={[0, 0]}
//       style={{ width: '100%', marginTop: 12 }}
//     >
//       <View style={[style.cardWrap]}>
//         <Text style={style.cardTit}>活动版区</Text>
//         <ScrollView
//           onLayout={onLayout}
//           scrollEventThrottle={16}
//           onScroll={Animated.event(
//             [{ nativeEvent: { contentOffset: { x: scrollX } } }],
//             { useNativeDriver: false },
//           )}
//           horizontal={true}
//           showsHorizontalScrollIndicator={false}
//           style={[style.scrollWrap]}
//         >
//           <View style={style.rowBlock}>
//             <Image
//               style={style.rowIcon}
//               source={require('../assets/icon/soccer.png')}
//             />
//             <Text style={style.colTit}>版区1</Text>
//           </View>
//           <View style={style.rowBlock}>
//             <Image
//               style={style.rowIcon}
//               source={require('../assets/icon/soccer.png')}
//             />
//             <Text style={style.colTit}>版区2</Text>
//           </View>
//           <View style={style.rowBlock}>
//             <Image
//               style={style.rowIcon}
//               source={require('../assets/icon/soccer.png')}
//             />
//             <Text style={style.colTit}>版区3</Text>
//           </View>
//           <View style={style.rowBlock}>
//             <Image
//               style={style.rowIcon}
//               source={require('../assets/icon/soccer.png')}
//             />
//             <Text style={style.colTit}>版区4</Text>
//           </View>
//           <View style={style.rowBlock}>
//             <Image
//               style={style.rowIcon}
//               source={require('../assets/icon/soccer.png')}
//             />
//             <Text style={style.colTit}>版区5</Text>
//           </View>
//           <View style={style.rowBlock}>
//             <Image
//               style={style.rowIcon}
//               source={require('../assets/icon/soccer.png')}
//             />
//             <Text style={style.colTit}>版区6</Text>
//           </View>
//           <View style={style.rowBlock}>
//             <Image
//               style={style.rowIcon}
//               source={require('../assets/icon/soccer.png')}
//             />
//             <Text style={style.colTit}>版区7</Text>
//           </View>
//         </ScrollView>
//         <View style={style.littleBlockWrap}>
//           <Animated.View
//             style={[
//               style.litterBlock,
//               {
//                 width: blockWidth,
//                 transform: [{ translateX: moveX }],
//               },
//             ]}
//           />
//         </View>
//       </View>
//     </Shadow>
//   )
// }
const style = StyleSheet.create({
  cnt: {
    height: '100%',
  },
  headerWrap: {
    paddingLeft: 14,
    paddingRight: 14,
    marginBottom: 20,
  },
  header: {
    width: 68,
    height: 68,
    borderRadius: 34,
    marginRight: 12,
    backgroundColor: '#fff',
  },
  hSeparate: {
    height: 12,
    borderRightWidth: 1,
    borderRightColor: '#999999',
    marginLeft: 16,
    marginRight: 16,
  },
  hbtm: {
    justifyContent: 'flex-start',
  },
  hName: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 4,
  },
  hAccount: {
    fontSize: 14,
    color: '#666',
    marginBottom: 4,
  },
  hLi: {
    fontSize: 14,
    color: '#333',
  },
  hIcon: {
    fontSize: 24,
    fontFamily: 'iconfont',
    color: '#333',
  },
  hSet: {
    color: '#333',
    fontSize: 14,
    marginTop: 2,
  },
  hIconWrap: {
    flexDirection: 'column',
    alignSelf: 'flex-start',
    marginLeft: 'auto',
  },
  vipCntWrap: {
    marginLeft: 14,
    marginRight: 14,
  },
  vipCnt: {
    width: '100%',
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
    height: 50,
    paddingLeft: 12,
    paddingRight: 12,
  },
  vipTit: {
    fontSize: 16,
    color: '#fff',
    fontWeight: 'bold',
  },
  vipSeparate: {
    height: 14,
    borderRightColor: '#fff',
    borderRightWidth: 1,
    marginLeft: 8,
    marginRight: 8,
  },
  vipLoop: {
    color: '#fff',
    fontSize: 14,
    flex: 1,
  },
  vipBtn: {
    width: 58,
    paddingTop: 4,
    paddingBottom: 4,
    borderRadius: 14,
    backgroundColor: '#fff',
  },
  vipBtnTxt: {
    width: '100%',
    textAlign: 'center',
    color: '#ffbf30',
    fontSize: 14,
  },
  mainBgm: {
    borderTopLeftRadius: 14,
    borderTopRightRadius: 14,
    backgroundColor: '#f1f1f1',
    paddingLeft: 8,
    paddingRight: 8,
    paddingBottom: 12,
    flex: 1,
  },
  topMenu: {
    paddingTop: 20,
    paddingBottom: 16,
    justifyContent: 'space-around',
  },
  topMenuTxt: {
    fontSize: 14,
    color: '#333',
    width: 80,
    textAlign: 'center',
  },
  topMenuItem: {
    display: 'flex',
    alignItems: 'center',
    flexDirection: 'column',
    width: 38,
  },
  topMenuIcon: {
    width: 22,
    height: 22,
    marginBottom: 4,
  },
  cardWrap: {
    borderRadius: 8,
    width: '100%',
    backgroundColor: '#fff',
  },
  scrollWrap: {
    height: 70,
    width: '100%',
    position: 'relative',
  },
  littleBlockWrap: {
    position: 'absolute',
    left: '50%',
    width: 20,
    height: 6,
    backgroundColor: '#f1f1f1',
    borderRadius: 3,
    marginLeft: -10,
    bottom: 8,
    overflow: 'hidden',
  },
  litterBlock: {
    height: 6,
    width: 6,
    borderRadius: 3,
    backgroundColor: '#f394a5',
  },
  rowBlock: {
    height: 70,
    width: 80,
    minWidth: 80,
    paddingTop: 2,
    display: 'flex',
    alignItems: 'center',
    verticalAlign: 'middle',
    justifyContent: 'center',
    flexDirection: 'column',
    borderRightColor: '#ffffff',
    borderRightWidth: 1,
  },
  rowIcon: {
    width: 24,
    height: 24,
    marginBottom: 4,
  },
  gridSperateLine: {
    height: '100%',
    borderRightColor: '#f1f1f1',
    borderRightWidth: 1,
  },
  gridMenu: {
    height: '100%',
    flex: 1,
    paddingHorizontal: 12,
  },
  gridWrap: {
    height: 58,
  },
  colTit: {
    fontSize: 14,
    color: '#333',
    flex: 1,
  },
  colIcon: {
    width: 16,
    height: 16,
    resizeMode: 'contain',
    marginRight: 4,
  },
  cardArrow: {
    fontFamily: 'iconfont',
    fontSize: 16,
    color: '#333',
  },
  colMenu: {
    paddingVertical: 16,
    paddingHorizontal: 12,
  },
  colSperateLine: {
    borderColor: '#f1f1f1',
    borderBottomWidth: 1,
  },
  cardTit: {
    width: '100%',
    paddingHorizontal: 10,
    paddingVertical: 12,
    color: '#333',
    fontWeight: 'bold',
    fontSize: 16,
  },
  cardCnt: {
    justifyContent: 'space-between',
    paddingHorizontal: 24,
    paddingBottom: 12,
  },
})
